<template>
	<view class="">
		<view class=box1>box1</view>
		<view class=box2>box2</view>
		
		<!-- 關鍵點1：給scroll-view標籤添加scroll-x -->
		<scroll-view class="scroll-view-box" scroll-x>
			<view class="scroll-view-item">1</view>
			<view class="scroll-view-item">2</view>
			<view class="scroll-view-item">3</view>
			<view class="scroll-view-item">4</view>
			<view class="scroll-view-item">5</view>
			<view class="scroll-view-item">6</view>
			<view class="scroll-view-item">7</view>
			<view class="scroll-view-item">8</view>
		</scroll-view>
		
		
		<view class="split-line">-------------------</view>
		
		<swiper class="swiper_box"
			indicator-dots
			indicator-color="rgba(255,255,255,0.3)"
			indicator-active-color="#fff"
			circular
		>
			<swiper-item class="swiper_item_box">1</swiper-item>
			<swiper-item class="swiper_item_box">2</swiper-item>
			<swiper-item class="swiper_item_box">3</swiper-item>
			<swiper-item class="swiper_item_box">4</swiper-item>
			<swiper-item class="swiper_item_box">5</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
import  { onLoad } from "@dcloudio/uni-app";

onLoad(() => {
	console.log("执行了onLoad函数");
})
</script>

<style lang="scss" scoped>
.box1 {
	border: 1px solid red;
}
.box2 {
	border: 1px solid blue;
}

.split-line {
	display: inline-block;
	margin: 10px auto;
}
.scroll-view-box {
	margin: 5px auto;
	width: 95%;
	height: 200px;
	border: 2px solid red;
	// 關鍵點2：設置不允許換行
	white-space: nowrap;
	.scroll-view-item {
		// 關鍵點3：設置行內快
		display: inline-block;
		margin: 5px;
		width: 100px;
		height: 190px;
		background-color: green;
	}
}
.swiper_box {
	width: 100vw;
	height: 200px;
	border: 1px solid black;
	.swiper_item_box {
		width: 100%;
		height: 100%;
		&:nth-child(1) {
			background-color: red;
		}
		&:nth-child(2) {
			background-color: green;
		}
		&:nth-child(3) {
			background-color: blue;
		}
		&:nth-child(4) {
			background-color: orange;
		}
		&:nth-child(5) {
			background-color: purple;
		}
	}
}


</style>
